<template>
  <div>
    <div class="title">
      <div>免考记录</div>

      <div>
      </div>
    </div>

    <el-form :inline="true" size="mini">
      <el-form-item label="超温级别">
        <el-select
          v-model="queryParams.overTemperaturelevel"
          placeholder="请选择"
        >
          <el-option
            v-for="item in OverTemperaturelevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机组">
        <el-select v-model="queryParams.Unit" placeholder="请选择">
          <el-option
            v-for="item in Unit"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="日期范围">
        <el-date-picker
          v-model="queryParams.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button type="primary">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%"
      size="mini"
      :row-class-name="tableRowClassName"
      :highlight-current-row="false"
    >
      <!-- :header-cell-style="{ background: '#2e5185' }" -->
      <el-table-column
        v-for="item in tableColumn"
        :key="item.attribute"
        :prop="item.attribute"
        :label="item.name"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-link @click="getDetail(row)">详情</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link  type="success">审核</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="showDialog" v-if="showDialog">
      <el-form label-width="150px" size="mini">
        <el-form-item
          v-for="item in tableColumn"
          :key="item.attribute"
          :label="item.name"
        >
          <el-input :value="obj[item.attribute]"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { OverTemperaturelevel, Unit, ClassValue, tableData } from '../dict'
export default {
  data () {
    return {
      OverTemperaturelevel: OverTemperaturelevel,
      Unit: Unit,
      ClassValue: ClassValue,
      tableData: tableData,
      queryParams: {
        overTemperaturelevel: null,
        Unit: null,
        ClassValue: null,
        time: null
      },
      tableColumn: [
        { name: '申请时间', attribute: 'time' },
        { name: '申请描述', attribute: 'describe' },
        { name: '机组', attribute: 'unit' },
        { name: '超温级别', attribute: 'overTemLevel' },
        { name: '开始时间', attribute: 'startTime' },
        { name: '结束时间', attribute: 'endTime' },
        { name: '流程状态', attribute: 'maxTempe' },
        { name: '申请人', attribute: 'normalTemp' }
      ],
      showDialog: false,
      obj: null
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row'
      }
      return 'success-row'
    },
    getDetail (row) {
      this.showDialog = true
      this.obj = row
      console.log(row)
    },
    toMianKaoJiLu () {
      this.$emit('changeComponents', 'MianKaoJiLu')
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  background-color: #2e5185;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.el-table .warning-row {
  background: #051c4d;
}

.el-table .success-row {
  background: #243654;
}
</style>
